<template>
  <v-chart class="chart h-full" :option="option" autoresize />
</template>

<script lang="ts" name="UserInf" setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
import { ref } from 'vue'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  BarChart,
  LineChart,
])

// provide(THEME_KEY, "dark");

const option = ref({
  grid: {
    left: 20,
    right: 20,
    bottom: 20,
    top: 20,
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    // 网格样式
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#eaeaec'],
        width: 1,
        type: 'dashed',
      },
    },
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
  },
  yAxis: {
    type: 'value',
    // 网格样式
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#eaeaec'],
        width: 1,
        type: 'dashed',
      },
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth: 30, // 设置柱子宽度为30
      // showBackground: true,
      // backgroundStyle: {
      //   color: "rgba(180, 180, 180, 0.2)",
      // },
    },
  ],
})
</script>
